<template>
    <div class="pageLayer">
        <Pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageConfig.pages || [10, 20, 30, 40]"
            :page-size="pageSize"
            :background="pageConfig.pageType !== 'mini'"
            :layout="layout"
            :total="pageConfig.total"
        >
        </Pagination>
    </div>
</template>

<script>
    import { Pagination } from "element-ui"
    export default {
        name: 'PaginationMy',
        data() {
            return {
                layout: '',
                currentPage: 1,
                pageSize: 10,
            }
        },
        components:{
            Pagination
        },
        props: {
            pageConfig: {
                type: Object,
                default: () => ({}),
            },
        },
        mounted() {
            this.currentPage = this.pageConfig.currentPage || 1
            this.pageSize = this.pageConfig.pageSize || 10
            //basic，mini,complete
            if (this.pageConfig.pageType === 'complete') {
                //完整的
                this.layout = 'total, sizes, prev, pager, next, jumper'
            } else if (this.pageConfig.pageType === 'mini') {
                //迷你的
                this.layout = 'prev, pager, next'
            } else {
                //基本的
                this.layout = 'prev, pager, next,sizes'
            }
        },
        methods: {
            handleSizeChange(val) {
                this.currentPage = 1
                this.pageSize = val
                this.$emit('getPageNum', this.currentPage, this.pageSize)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.$emit('getPageNum', this.currentPage, this.pageSize)
            },
        },
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .el-pager li {
        background-color: #fff;
        border: 1px solid #dddddd;
        font-weight: 400;
    }
    .pageLayer {
        text-align: right;
        height: 40px;
        margin-top: 10px;
        ::v-deep .el-pager li {
            font-weight: 400;
        }
    }
</style>
